<template>
    <!-- 虽然 num 是通过 ref 创建的, 但是在 template 中使用的时候, 我们不需要添加 .value -->
    <h1>APP 组件 --- {{ num }}</h1>

    <button @click="addNum">点击修改 num</button>

    <ul>
        <li>{{ obj.name }}</li>
        <li>{{ obj.age }}</li>
        <li>{{ obj.id }}</li>
    </ul>
</template>

<script setup>
import { ref, reactive } from "vue";

/**
 *  以前学习的 ref 属性, 是帮助我们获取 标签或者组件
 *  现在学习的 ref 方法, 是帮助我们创建 响应式数据
 *
 *
 *      ref 方法会根据我们传入的 初始值 返回一个 响应式对象   (不管传入的什么类型, 绝对会返回一个响应式对象)
 *      这个响应式对象中, 有一个 value 属性, 就是我们想要得到的值
 *
 *      ref 不管传入的是什么类型的数据, 都会给你包装一个对象, 这个对象内部的 value 属性是你给的初始值
 *
 *
 *  在 组合式 API 中, 除了 ref 之外, 还有一个 reactive 也能够帮助我们创建响应式数据
 *      但是 reactive 只能给 引用数据类型使用, 基本数据类型, 不能用
 *
 *      其实 ref 就是 reactive 的一个 语法糖
 *
 *      注意: 通过 reactive 创建的数据, 不需要添加 .value, 我们可以直接通过变量名获取到我们想要的数据
 *              不要给 通过 reactive 创建的变量 直接赋值, 这样会让之前的变量失去响应式
 * 
 * 
 *      综上所述, 在 vue 的组合式 API 中, 所有的响应式数据, 不管是 ref 还是 reactive 创建的
 *              都推荐使用 const 声明
 *              能够防止我们给 响应式数据重新赋值
 */

const num = ref(100);
// console.log(num)
// console.log(num.value)

const obj = ref({
    name: "张三",
    age: 18,
    id: "QF001",
});

// console.log('obj', obj)
// console.log('obj.value', obj.value)
// console.log('obj.value.name', obj.value.name)
// console.log('obj.value.age', obj.value.age)
// console.log('obj.value.id', obj.value.id)

const info = reactive({
    id: "xf001",
    name: "苹果",
    price: 100,
    number: 20,
});

// console.log(info)

/**
 *  当前代码会导致 info 失去响应式
 *
 *      因为当前的代码是给 info 这个变量重新赋值一个 普通的对象, 这个新的对象是没有响应式能力
 */
// info = {
//     id: 'xf001',
//     name: '橘子',
//     price: 50,
//     number: 20
// }

// 下边的写法, 不会导致 info 失去响应式
info.name = '橘子'
info.price = 50




function addNum() {
    num.value++;
    console.log("num 最新的值: ", num.value);
}
</script>
